<template>
    <div class="feature-area">
      <h2>功能区域</h2>
      <el-card v-for="feature in features" :key="feature.id" class="feature-card">
        <template #header>
          <div class="card-header">
            <span>{{ feature.title }}</span>
          </div>
        </template>
        <p>{{ feature.description }}</p>
      </el-card>
      <h2>最近活动</h2>
      <el-timeline>
        <el-timeline-item v-for="activity in activities" :key="activity.id" :timestamp="activity.time">
          <el-card>
            <p>{{ activity.text }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  const features = ref([
    { id: 1, title: '新建查询', description: '快速创建新的查询任务。' },
    { id: 2, title: '创建备份', description: '一键备份当前实例的数据。' },
    { id: 3, title: '性能监控', description: '实时监控服务器性能指标。' },
  ]);
  
  const activities = ref([
    { id: 1, time: '10:00', text: '创建了新的备份任务。' },
    { id: 2, time: '09:45', text: '执行了数据清理操作。' },
    { id: 3, time: '09:30', text: '登录系统。' },
  ]);
  </script>
  
  <style scoped>
  .feature-area {
    padding: 20px;
  }
  
  .feature-card {
    margin-bottom: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  </style>